<template>
	<view class="mx-header">
		<view class="header-main" :style="[main_style]">
			<view class="header-content" :style="[{ height: `${content_hegiht}px` }]">
				<view class="header-c">
					<slot name="left">
						<view class="c-l" v-if="is_back" @click.stop="goBack">
							<!-- #ifndef MP -->
							<text class="cuIcon cuIcon-back" v-if="!isFirstRoute" :style="{ color: text_color }"></text>
							<text class="cuIcon cuIcon-shop" v-else @click.stop="goHome"
								:style="{ color: text_color }"></text>
							<!-- #endif -->
							<!-- #ifdef MP -->
							<text class="cuIcon cuIcon-back" v-if="!isFirstRoute" :style="{ color: text_color }"></text>
							<image v-else class="mx-home" src="/static/home-circle.png" mode="widthFix"
								lazy-load="false" @click.stop="goHome">
							</image>
							<!-- #endif -->
						</view>
					</slot>
					<slot name="center">
						<view class="c-txt text-limit-1" :style="{ color: text_color }" v-if="title">{{ title }}</view>
					</slot>
					<!-- #ifdef APP-PLUS || H5 || APP-HARMONY -->
					<slot name="right">
						<view class="c-r" v-if="isTbasRoute">
							<icon class="" type="search" size="16" :color="text_color || '#000'" @click.stop="goSearch">
							</icon>
							<!-- <text class="cuIcon cuIcon-shop" @click.stop="goHome" v-if="!isFirstRoute" :style="{ color: text_color }"></text> -->
						</view>
					</slot>
					<!-- #endif -->
				</view>
			</view>
		</view>
		<view class="clear-fix" v-if="isClearFixed" :style="{ height: `${height}px` }" />

	</view>
</template>

<script setup>
import { computed } from 'vue';

const { proxy } = getCurrentInstance()
// 获取系统状态栏的高度
let height = proxy.$tools.navbar_height(),
	content_hegiht = 0
let menuButtonInfo = {}
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo = uni.getMenuButtonBoundingClientRect()
// height = menuButtonInfo.bottom + 10
content_hegiht = menuButtonInfo.height + 20
// #endif

// #ifdef APP-PLUS || H5
content_hegiht = height
// #endif

let curPages = getCurrentPages();
let route = curPages[curPages.length - 1].route

const isTbasRoute = computed(() => {
	return !(route && (route === 'pages/tabs/index/index' || route === 'pages/tabs/user/index' || route === 'pages/tabs/cate/index' || route === 'pages/tabs/brand/index' || route === 'pages/tabs/cart/index'))
})
const isFirstRoute = computed(() => {
	return (!curPages || curPages.length === 0 || curPages.length === 1 || !route)
})

const props = defineProps({
	// 导航栏标题
	title: {
		type: String,
		default: "",
	},
	background: {
		type: String,
		default: "#fff",
	},
	is_back: {
		type: Boolean,
		default: true,
	},
	text_color: {
		type: String,
		default: "",
	},
	// 自定义返回逻辑
	customBack: {
		type: Function,
		default: null,
	},
	isClearFixed: {
		type: Boolean,
		default: true,
	},
	config_info: {
		type: Object,
		default: {},
	}
})

const goBack = () => {
	// 如果自定义了点击返回按钮的函数，则执行，否则执行返回逻辑
	if (typeof props.customBack === "function") {
		props.customBack()
	} else {
		uni.navigateBack()
	}
}
const goSearch = () => {

}
const goHome = () => {
	proxy.$tools.go('/pages/tabs/index/index')
}
const { title, background, is_back, text_color, isClearFixed } = toRefs(props)

const main_style = computed(() => {
	let style = {
		'height': `${height}px`
	}
	if (props.config_info && props.config_info.bg_img) {
		style['background-image'] =  `url(${proxy.$imgUrl + props.config_info.bg_img})`
	} else if (props.background) {
		style['background'] = props.background
	}
	return style
})
</script>

<style scoped lang="scss">
.mx-header {
	width: 100%;
	height: auto;

	.header-main {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99;
		background-size: 100% auto;
		background-repeat: no-repeat;

		.header-content {
			width: 100%;
			position: absolute;
			left: 0;
			bottom: 0;

			.header-c {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				color: #000;
				position: relative;

				.c-l {
					width: 200rpx;
					height: 100%;
					position: absolute;
					left: 0;
					top: 0;
					display: flex;
					align-items: center;
					padding-left: 20rpx;

					.mx-shouye {
						font-size: 36rpx;
					}

					.mx-home {
						width: 64rpx;
						height: 64rpx;
					}
				}

				.c-txt {
					max-width: 60%;
					margin: 0 auto;
				}

				.c-r {
					width: 200rpx;
					height: 100%;
					position: absolute;
					right: 0;
					top: 0;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					padding-right: 20rpx;

					.mx-shouye {
						font-size: 36rpx;
						margin-left: 30rpx;
					}
				}
			}
		}
	}
}
</style>
